<template>
    <div class="sort-part" :class="{learning:type==='0',primary:type==='1',middle:type==='2',height:type==='3'}">
        <div class="title">
            <div class="name">{{type==='0'?'正在学习':type==='1'?'小学':type==='2'?'初中':type==='3'?'高中':''}}</div>
            <div class="right-name" v-if="type!=='0'">共{{list.length}}本</div>
        </div>
        <div class="body" v-for="(item,i) in list" @click="toLevel(item)">
            <div class="book-img">
                <span>{{item.category===0?'小学':item.category===1?'初中':item.category===2?'高中':''}}</span>
            </div>
            <div class="book-div">
                <div class="book-name">{{item.wordRepoName}}</div>
                <div class="word-num"><span class="nomal">单词数量 ：</span>{{item.wordCount}}</div>
                <div class="learning-num">
                    {{item.learnCount}}<span class="nomal">人在学</span>
                    <span v-if="item.learnStatus===1" class="status learn">正在学</span>
                    <span v-if="item.learnStatus===2" class="status pass">已学过</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'sort-part',
    props: ['type','list'],
    methods: {
        toLevel(item){
            if(item.wordCount){
                this.$router.push({path:'/level',query:{id:item.id,title:item.wordRepoName}})
            }else{
                Toast('该词典暂未开放,敬请期待')
            }
        }
    }
}
</script>
<style lang="stylus" scoped>
.sort-part
    padding 0 20px
    background white
    box-shadow 1px 1px 4px 0px rgba(7, 57, 7, 0.1)
    border-radius 6px
    &.learning
        color #3fbc5f
        .book-img
            background url('../assets/img/learning.png')
            color white
    &.primary
        color #ff9600
        .book-img
            background url('../assets/img/primary.png')
            color #b06800
    &.middle
        color #43acea
        .book-img
            background url('../assets/img/middle.png')
            color #005688
    &.height
        color #7656d1
        .book-img
            background url('../assets/img/height.png')
            color #005688
    .title
        display flex
        font-size 16px
        height 45px
        align-items center
        .name
            flex 1
            font-weight bold
        .right-name
            width 100px
            text-align right 
    .body
        padding 10px 0
        display flex
        border-top 1px solid #eeeeee
        .book-img
            height 104px
            width 84px
            background-size 100%
            background-repeat no-repeat
            display flex
            align-items center
            justify-content center
            font-size 16px
            font-weight bold
        .book-div
            margin-left 20px
            width 1px
            flex 1
            .nomal
                color #999
            .book-name
                color #333
                font-size 16px
                margin 10px 0 20px 0
                max-width 100%
                display inline-block
                overflow hidden
                text-overflow ellipsis
                white-space nowrap
            .word-num,.learning-num
                font-size 14px
                position relative
            .status
                display flex
                width 64px
                height 24px
                border-radius 5px
                position absolute
                right 10px
                align-items center
                justify-content center
                top 0
                &.learn
                    border 1px solid #ff9000
                    color #ff9000
                &.pass
                    border 1px solid #999999
                    color #999999
</style>

